<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
	<style>
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.img {
			display: flex;
			flex-wrap: wrap;
		}
		.img img{
			width: 210px;
			height: 210px;
			object-fit: cover;
			/* margin: 15px; */
		}
		.form-control {
			height: auto;
		}
		#cboxClose{
			text-indent: 0;
			font-size: 50px;
			font-weight: bold;
			margin-top: 10px;
			color: red;
		}
		.ace-thumbnails li {
			margin: 10px;
		}
		.div-audio {
			margin: 30px 0;
		}
		audio {
			margin-right: 10px;
		}
		.audio {
			margin-bottom: 20px;
			font-size: 18px;
		}
		.delete-audio {
			margin-left: 10px;
		}
		.btn-display-outer {
			width: 210px;
			height: 210px;
			position:absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn-display {
			width:100px !important;
			height:100px !important;
		}
    </style>
	<div class="page-header">
		<h1><?=isset($subjectContentInfo) ? '编辑' : '发布'?><?= $typeTitle ?></h1>
	</div>
	<div class="col-xs-12">
		<form class="form-horizontal" id="classes-form">
			<input type="hidden" name="id" value="<?=isset($subjectContentInfo['id']) ? $subjectContentInfo['id'] : 0 ?>" />
			<input type="hidden" name="video_link" value="<?= isset($subjectContentInfo['video_link']) ? $subjectContentInfo['video_link'] : '' ?>" />
			<input type="hidden" name="video_poster" value="<?= isset($subjectContentInfo['video_poster']) ? $subjectContentInfo['video_poster'] : '' ?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">主题标题：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="title" value="<?= isset($subjectContentInfo['title']) ? $subjectContentInfo['title'] : '' ?>" placeholder="请填写主题标题"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">生效时间：</label>
				<div class="col-sm-6">
					<input class="form-control" id="datetime-picker-begin" type="text" name="begintime" value="<?= isset($subjectContentInfo['begintime']) ? $subjectContentInfo['begintime'] : date('Y-m-d H:i') ?>" placeholder="请选择生效时间"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">失效时间：</label>
				<div class="col-sm-6">
					<input class="form-control" id="datetime-picker-end" type="text" name="endtime" value="<?= isset($subjectContentInfo['endtime']) ? $subjectContentInfo['endtime'] : date('Y-m-d H:i') ?>" placeholder="请选择失效时间"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">在上课模式显示：</label>
				<div class="col-sm-6">
					<select class="form-control" name="play_in_class_mode">
						<option value="0">否</option>
						<option value="1" style="color: red">是</option>
					</select>
					<li class="text-warning bigger-110 orange" style="list-style-type:none;">
						<i class="ace-icon fa fa-exclamation-triangle"></i>
						当班级主题生效期间，班牌进入上课模式时显示该主题内容。
					</li>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">发布班级：</label>
				<div class="col-sm-6">
					<?php foreach($gradeArray as $key => $grade): ?>
						<div class="well well-sm">
							<a class="blue select-grade" href="javascript:;" title="全选年级"><?=$key?> <span style="color: #999;margin-left: 5px">(点击选中全部班级)</span></a>
							<div class="mt5">
							<?php foreach($grade['class'] as $class): ?>
								<label class="inline checkbox-item mr20">
									<input class="ace" type="checkbox" name="subject_content_class" value="<?=$class['id']?>" />
									<span class="lbl"> <?=$class['class_name']?></span>
								</label>
							<?php endforeach; ?>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			</div>
			<?php if($type == SUBJECT_CONTENT_TYPE_IMAGE_AND_TEXT): ?>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">图文内容：</label>
					<div class="col-sm-6">
						<textarea class="pd0" id="content" name="content" style="height: 400px;width: 100%"><?= isset($subjectContentInfo['content']) ? urldecode($subjectContentInfo['content']) : '' ?></textarea>
					</div>
				</div>
			<?php elseif($type == SUBJECT_CONTENT_TYPE_VIDEO): ?>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">是否全屏显示：</label>
					<div class="col-sm-6">
						<select class="form-control" name="is_full_screen">
							<option value="1">是</option>
							<option value="0">否</option>
						</select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">视频文件：</label>
					<div class="col-sm-6">
						<div class="form-control">
							<div class="img">
								<ul class="ace-thumbnails ace-thumbnails-video clearfix">
									<li style="height: 210px;">
										<a href="javascript:;" id="upload-video" style="">
											<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
										</a>
									</li>
									<?php if(isset($subjectContentInfo['videoArr'])): ?>
										<?php foreach($subjectContentInfo['videoArr'] as $video): ?>
											<li class="li-video">
												<a class="a-video" data-saveas="<?= $video['link'] ?>" style="position:relative;background: rgba(0,0,0,0.4)"
												data-link="<?= isset($video['old_link']) ? $video['old_link'] : $video['link'] ?>" href="<?= $video['href'] ?>" target="_blank" id="" style="height: 240px;">
													<img style="opacity: 0.4" class="cover" src="<?=$video['cover']?>"  class="fit-cover">
													<div class="text">
														<div class="inner"></div>
													</div>
													<div class="btn-display-outer">
														<img class="btn-display" src="<?=$staticAdminUrl?>assets/images/video_display_btn.png">
													</div>
													
												</a>	
												<div class="tools tools-bottom">
													<a href="javascript:;" class="red video-delete">
														<i class="ace-icon fa fa-trash"></i>
													</a>
												</div>
											</li>
										<?php endforeach; ?>
									<?php endif ?>		
								</ul>
							</div>
						</div>
					</div>
				</div>
			<?php endif ?>

			<div class="clearfix">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 百度编辑器 -->
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.config.js"></script>
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	$(function(){
		<?php if(isset($subjectContentInfo) && !empty($subjectContentInfo)): ?>
			// 选中接收的班级
			var classArray = "<?=$subjectContentInfo['class_id']?>".split(",");
			for(var i in classArray) {
				var subjectContentClass = $("[name=subject_content_class][value="+ classArray[i] +"]")[0];
				if(subjectContentClass) {
					subjectContentClass.checked = true;
				}
			}
			// 在上课模式播放
			$("[name=play_in_class_mode]").val("<?=$subjectContentInfo['play_in_class_mode']?>");
			// 全屏显示
			$("[name=is_full_screen]").val("<?=$subjectContentInfo['is_full_screen']?>");
		<?php endif; ?>

		// 点击年级，全选下级班级
		var cancel = false;
		$(".select-grade").click(function(){
			// 第一选择，第二次取消选择
			if(cancel) {
				// 取消选择
				$(this).parent().find("[name=subject_content_class]").each(function(){
					$(this)[0].checked = false;
				});
				cancel = ! cancel;
			} else {
				// 选择
				$(this).parent().find("[name=subject_content_class]").each(function(){
					$(this)[0].checked = true;
				});
				cancel = ! cancel;
			}
		})

		<?php if($type == SUBJECT_CONTENT_TYPE_IMAGE_AND_TEXT): ?>
			// 初始化编辑器
			var ue = UE.getEditor('content');
		<?php elseif($type == SUBJECT_CONTENT_TYPE_VIDEO): ?>
			// 视频上传
			var i = 1;
			$("#upload-video").uploader({
				"server":  '<?=UP_FORM_URL?>',
				"authorization": "<?=$signature?>",
				"policy": "<?=$policy?>",
				"accept": "video",
				"callback": function(response) {
					layer.load();
					var fileLink = "<?=UP_URL?>" + response.url;
					// 视频压缩
					// var str = '<?= date("Y") . "/" . date("m") . "/" . date("d"). "/". uniqid() . ".mp4" ?>';
					i ++;
					var str = '<?= date("Y") . "/" . date("m") . "/" . date("d"). "/".  time() . rand(1000,10000) ?>' + i + ".mp4";
					var saveAs = '/' + str;
					var saveAsLink = "<?= BASE_URL ?>" + 'local/video/' + str;
					var url = '<?= wx_url("util/video_compress") ?>';
					var params = { source: response.url, save_as_link: saveAsLink };
					ajax_get(url, params);
					// 视频截取封面
					var url = '<?= wx_url("util/video_snapshot") ?>';
					var params = { video_link: fileLink};
					ajax_get(url, params, function(res) {
						var videoCover = res.data.video_cover;
						// 加载视频文件
						$(".ace-thumbnails-video").append('\
							<li class="li-video">\
								<a class="a-video" data-saveas="' + saveAsLink + '" style="position:relative;background: rgba(0,0,0,0.4)" data-link="' + fileLink + '" href="' + fileLink + '" target="_blank" style="height: 240px;">\
									<img style="opacity: 0.4" class="cover" src="' + videoCover + '"  class="fit-cover">\
									<div class="text">\
										<div class="inner"></div>\
									</div>\
									<img class="btn-display" src="<?=$staticAdminUrl?>assets/images/video_display_btn.png" style="width:100px;height:100px;left:25%;top:25%;position:absolute;">\
								</a>\
								<div class="tools tools-bottom">\
									<a href="javascript:;" class="red video-delete">\
										<i class="ace-icon fa fa-trash"></i>\
									</a>\
								</div>\
							</li>\
						');
					});
					layer.closeAll('loading');
				}
			});
			// 删除视频
			$("body").on("click", ".video-delete", function(e){
				var that = $(this);
				layer.confirm('确定删除该视频吗？', function(index){
					that.parents("li").hide();
					layer.close(index);
				});
			});
			// 主题加载视频封面
			setInterval(function(){
				$("video").each(function(){
					var poster = $(this).attr("poster");
					var videoFile = $(this).attr("src");
				})
			}, 1000)
		<?php endif ?>	

		
		$(".submit").click(function() {
			var id = $("[name=id]").val();
			var subjectContentTitle = $("[name=title]").val();
			var subjectContentClassArr = [];
			$("[name=subject_content_class]").each(function() {
				if($(this).prop("checked")) {
					subjectContentClassArr.push($(this).val());
				}
			});
			var subjectContentClass = subjectContentClassArr.join(',');
			var content = $("[name=content]").val();
			var begintime = $("[name=begintime]").val();
			var endtime = $("[name=endtime]").val();
			var playInClassMode = $("[name=play_in_class_mode]").val();
			var isFullScreen = $("[name=is_full_screen]").val();
			// 获取视频文件
			var videoArr = new Array();
			$(".ace-thumbnails .li-video").each(function() {
				if($(this).css('display') != 'none') {
					videoArr.push({
						'cover': $(this).find(".cover").attr("src"),
						'link': $(this).find(".a-video").data("saveas"),
						'old_link': $(this).find(".a-video").data("link")
					});
				}
			});

			// console.log(audioArr);return;
			var url = "<?=admin_url('contents/save_subject_content_action')?>";
			var data = {
				"type": "<?= $type ?>",
				"id": id,
				"title": subjectContentTitle,
				"subject_content_class": subjectContentClass,
				"content": content,
				"video_arr": videoArr,
				'begintime': begintime,
				'endtime': endtime,
				"play_in_class_mode": playInClassMode,
				'is_full_screen': isFullScreen
			};
			// console.log(1);return;
			ajax_post(url, data, function() {
				window.location.href = "<?=admin_url('contents/subject_content')?>";
			});
		});
	
		// 日期时间选择器
		$('#datetime-picker-begin').datetimepicker({
			format: 'YYYY-MM-DD HH:mm',
			icons: {
				time: 'fa fa-clock-o',
				date: 'fa fa-calendar',
				up: 'fa fa-chevron-up',
				down: 'fa fa-chevron-down',
				previous: 'fa fa-chevron-left',
				next: 'fa fa-chevron-right',
				today: 'fa fa-arrows ',
				clear: 'fa fa-trash',
				close: 'fa fa-times'
			}
		}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});
		$('#datetime-picker-end').datetimepicker({
			format: 'YYYY-MM-DD HH:mm',
			icons: {
				time: 'fa fa-clock-o',
				date: 'fa fa-calendar',
				up: 'fa fa-chevron-up',
				down: 'fa fa-chevron-down',
				previous: 'fa fa-chevron-left',
				next: 'fa fa-chevron-right',
				today: 'fa fa-arrows ',
				clear: 'fa fa-trash',
				close: 'fa fa-times'
			}
		}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});
	})
</script>